<template>
	<view class="contener">
		<skeleton :skeleton="skeleton" :loading="loading">
			<block>
				<view class="contenerBox">
					<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval">
						<swiper-item v-if="video">
							<video class="swiperimg" :src="video" autoplay="true"
								enable-progress-gesture="false"></video>
						</swiper-item>
						<swiper-item v-for="(item,index) in data" :key="index" style="text-align: center;">
							<image class="swiperimg" :src='item' mode="widthFix" @click="clickImg"></image>
						</swiper-item>
					</swiper>

					<view class="biaotiBox">
						<!-- <text class="biaotiTitle">包邮</text> -->
						{{productDetail.title}}
						<!-- 榴力量d197猫山王榴莲正宗马来西亚进口液氮冷冻新鲜水果 -->
					</view>
					<view class="bottomCont">
						<view class="cont">
							<view class="priceTit">
								<view style="color: #ff7800;">
									<view>
										￥{{productDetail.price}}
									</view>
								</view>
								<view class="saleTit"><text style="">销量: {{productDetail.sale}} </text>
									<text style="text-decoration: none;font-size: 30rpx;color: #949393;">
										库存: {{productDetail.inventory==-1?'充足':productDetail.inventory}}
									</text>
								</view>
							</view>
						</view>
					</view>

					<view class="pricetiBox">
						<view class="contener700  textSize">
							<view class="shopTitle" text="商品简介">商品简介</view>
							 <text class="overview"> {{productDetail.overview}}</text>
						</view>
					</view>


					<view class="evaluationBox" v-if="usEvaluate">
						<view class="contener700 between">
							<view>用户评价</view>
							<view>
								<view class="center_horizontal ">
									<view>查看更多</view>
									<image class="icon_next" src="../../static/images/mine/icon_next.png" mode="">
									</image>
								</view>
							</view>
						</view>
						<view class="contener700" style="margin-top: 10rpx;">
							<view class="between">
								<view class="center_horizontal moreBox">
									<image class="avatarUrl" :src="result.avatar"></image>
									<view class="name">{{result.nick}}</view>
								</view>
								<view class="moreBox">
									2021.10.10
								</view>
							</view>
							<view>
								{{usEvaluate.content}}
							</view>
							<view class="between">
							</view>

						</view>
					</view>
					<view class="shopDetails">
						<view class="shopTitle" text="商品详情">商品详情</view>
						<view class="center_horizontal" style="width:750rpx;">
							<view class="informationBox2">
								<view>
									<view style="margin-bottom:15rpx;">
										<rich-text :nodes="productDetail.content"></rich-text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 单独买弹窗 -->
				<hqs-popup :title="productDetail.title" v-model="showPopup" :showHeader="false" :height="popHeight">
					<view class="desc futext" style="font-size: 35rpx;padding-bottom: 150rpx;">
						<view class="topPop">
							<image :src="imgapi+productDetail.avatar" mode=""
								@click="clickImg(imgapi+productDetail.avatar)"></image>
							<view class="right">
								<view v-if="discountPrice"><text>￥</text>{{discountPrice}}
								</view>
								<view v-else><text>￥</text>{{minOri}}-{{maxOri}}</view>
								<view v-if="score" style="font-size: 32rpx;"><text class="scoreTit">库存:</text>
									{{score==-1?'充足':score}}</view>
							</view>
						</view>
						<view class="line" style="height: 5rpx;"></view>
						<view class="selectCont">
							<view class="line" style="height: 5rpx;"></view>
							<view style="margin: 20rpx 0;">规格</view>
							<view class="tagSelect">
								<uni-data-checkbox @change="selectPop3" mode="tag" v-model="value" :localdata="speicArr"
									selectedColor='#a0e223' selectedTextColor="#fff">
								</uni-data-checkbox>
							</view>
						</view>
						<button @tap="goDetail(1)" type="warn" class="btnPop">马上抢</button>
					</view>
				</hqs-popup>

				<!-- <view class="shopBottomBox">
					<button class="sharebox" open-type="share">分享</button>
					<view class="zhaibox" @tap="tzwoyaozhaiOrder">
						提交订单
					</view>
					<view class="zhaibox" @tap="select" v-if="hasSpec==1">
						选规格
					</view>
				</view> -->
				
				<view class="goods-carts">
					<uni-goods-nav :options="options" :fill="true" :button-group="showGroup" @click="onClick"
						@buttonClick="buttonClick" />
				</view>
				
			</block>
		</skeleton>
	</view>

</template>

<script>
	import cartcontrol from '@/components/cartcontrol.vue'
	import Skeleton from '@/components/ls-skeleton/ls-skeleton.nvue';
	import hqsPopup from "@/components/hqs-popup/hqs-popup.vue"
	export default {
		components: {
			cartcontrol,
			Skeleton,
			hqsPopup
		},
		data() {
			return {
				// 底部栏
				options: [{
					icon: 'icon-fenxiangfangshi',
					text: '分享'
				}],
				showGroup:[], // 要展示的按钮
				customButtonGroup1: [{
					text: '选规格',
					backgroundColor: 'linear-gradient(90deg, #83b120, #70971c)',
					color: '#fff'
				},{
					text: '提交订单',
					backgroundColor: 'linear-gradient(90deg, #83b120, #70971c)',
					color: '#fff'
				}],
				
				showPopup: false, //弹窗
				popHeight: '80vh', //弹窗高度
				minOri: 0, //规格最低价
				maxOri: 0, //规格最高价

				specList: [], //规格列表
				hasSpec: -1, //规格存在
				speicArr: [], //规格选择
				discountPrice: 0, // 选中规格价
				score: null, //选中库存


				placeholder: '开始输入...',
				avatarUrl: '',
				nickName: '大苏打',
				indicatorDots: true,
				autoplay: false,
				interval: 2000,
				duration: 2000,
				productDetail: {},
				data: [],
				usEvaluate: false,
				result: [],
				video: '',
				type: null,

				loading: true,
				skeleton: [
					'card-lg',
					40,
					'line-lg*3',

				], //骨架屏
			}
		},
		//分享
		onShareAppMessage(res) {
			if (res.from === 'button') {
				// 来自页面内转发按钮
				console.log(res.target)
			}
			return {
				title: '', //转发标题
				path: `pages/detail/detail?id=${this.productDetail.id}` // 分享后打开的页面
			}
		},
		onShow() {
			// 初始化
			this.showPopup = false
			this.discountPrice = null
			this.discount = null
			this.score = null
			this.productDetail = {
				...this.productDetail,
				discount: null,
				discountPrice: null,
				
			}
			
		},
		onLoad(e) {
			this.type = e.type
			//请求
			this.$axios({
				url: `user/public/shop/detail`,
				method: "post",
				data: {
					id: e.id,
					type: e.type
				}
			}).then((res) => {
				this.productDetail = res.result.goods
				console.log(this.productDetail);
				if (this.productDetail.video) {
					this.video = this.$reqConfig.URLIMAGE + this.productDetail.video
				}


				this.result = res.result //所有返回
				this.productDetail.content = this.productDetail.content.replace(/\<img src="/gi,
					'<img src=' + '\"' + this.$reqConfig.URLIMAGE)
				let imgarr = JSON.parse(this.productDetail.img)
				let newimgarr = []
				imgarr.forEach(item => {
					newimgarr.push(this.$reqConfig.URLIMAGE + item)
				})
				this.data = newimgarr

				//判断有没有评论
				if (res.result.usEvaluate) {
					this.usEvaluate = res.result.usEvaluate
					console.log('pinglun', this.usEvaluate)
				}

				this.hasSpec = this.productDetail.hasSpec
				this.specList = res.result.specList

				if (this.hasSpec == 1) {
					let array = this.getValue(this.specList, "describe", "score")
					console.log('array', array);
					array.forEach(item => {
						this.speicArr.push({
							value: item.describe,
							text: item.describe,
							disable: item.score == 0 ? true : false
						})
					})
				}
				
				if(this.specList){
					let ori = this.specList.map(val => val.price)
					this.minOri = Math.min(...ori)
					this.maxOri = Math.max(...ori)
				}
				
				// 处理底部按钮
				// this.hasSpec = 1 // 测试
				if(this.hasSpec == 1 && this.specList.length != 0){
					this.showGroup = this.customButtonGroup1
				}else{
					this.showGroup = [this.customButtonGroup1[1]]
				}

				// 骨架屏取消
				this.loading = false;
			})
		},
		methods: {
			// 点击图片放大
			clickImg(e) {
				wx.previewImage({
					urls: this.data, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: e.currentTarget.dataset.src, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			
			// 底部栏按钮
			onClick(e) {
				console.log(e)
				
				if (e.index == 1) {
					if(e.content.text=="预约摘菜"){
						this.tzwoyaozhaiOrder(1)
					}else{
						uni.navigateTo({
							url: `../growVegetables/shopList?id=${this.productDetail.merchantId}`
						})
					}
				}
			},
			buttonClick(e) {
				console.log(e.content.text)
				if(e.content.text == "选规格"){
					this.select()
				}else{
					this.tzwoyaozhaiOrder()
				}
				return
			},
			
			
			// type=1为单独购买有规格   前往订单页
			goDetail(type) {

				if (!this.discount) {
					uni.showToast({
						title: '请选择规格',
						duration: this.duration,
						icon: "none"
					});
					console.log(111);
					return
				}

				this.productDetail = {
					...this.productDetail,
					discountPrice: this.discountPrice,
					discount: this.discount,
					origin: this.originPrice,
					priceId: this.priceId,
				}
				this.tzwoyaozhaiOrder()

			},
			// 获取单一属性
			getValue(arr, describe, score) {
				let newArr = arr.map(item => {
					return {
						describe: item[describe],
						score: item[score]
					}
				})
				return newArr
			},

			// 选规格
			selectPop3(e) {
				this.discount = e.detail.value
				this.specList.map(val => {
					if (val.describe == this.discount) {
						this.discountPrice = val.price
						this.score = val.score
					}
				})
			},
			// 规格弹窗
			select() {
				this.showPopup = true
			},
			tzwoyaozhaiOrder() {
				if (this.score == 0) {
					uni.showToast({
						title: '库存不足',
						duration: this.duration,
						icon: "none"
					});
				}

				let product = {
					productDetail: this.productDetail,
					type: this.type
				}
				if (this.type == 1) {
					uni.navigateTo({
						url: './shopOrder?product=' + encodeURIComponent(JSON.stringify(product))
					})
				} else {
					uni.navigateTo({
						url: '../shop/shopOrder?product=' + encodeURIComponent(JSON.stringify(product))
					})
				}



			},
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editorId');
				// #endif

				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			},

			addCart: function(item) {
				console.log('item', item)
				if (item.count >= 0) {
					item.count++
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							// 根据名字添加购物车,实际环境根据需要更改
							if (item.name == food.name) {
								food.count = item.count
								// this.catrgoryList.push(item)
								// console.log('列表',this.catrgoryList)
							}
						})
					})
				} else {
					console.log('add')
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								Vue.set(food, 'count', 1)
						})
					})
				}
			},
			decreaseCart(item) {
				this.catrgoryList.push(item)
				console.log('列表', this.catrgoryList)
				if (item.count) {
					item.count--
					this.goods.forEach((good) => {
						good.foods.forEach((food) => {
							if (item.name == food.name)
								food.count = item.count
						})
					})
				}
			},
			// 清空购物车
		}
	}
</script>

<style scoped>
	.scoreTit {
		color: #999;
		font-weight: normal;
	}

	.saleTit text {
		text-decoration: none;
		font-size: 30rpx;
		color: #949393;
		margin-left: 20rpx;
	}

	.shopDetails .title {
		text-align: center;
		position: relative;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	.shopDetails .title::before {
		display: inline-block;
		content: "";
		width: 150rpx;
		height: 10rpx;
		position: absolute;
		bottom: 0;
		background: rgba(134, 204, 20, .5);
	}

	.overview {
		display: inline-block;
		vertical-align: top;
		width: 100%;
	}

	.textSize {
		font-size: 32rpx;
		color: #00000082;
	}

	.bottomCont {
		background-color: #fff;
	}

	.bottomCont .cont {
		padding: 0 20rpx 20rpx;
	}

	.priceTit {
		color: #6d6d6d;
		font-size: 40rpx;
		font-weight: bold;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.priceTit text {
		font-size: 32rpx;
		color: #949393;
		/* margin-left: 20rpx; */
		font-weight: normal;
	}

	.btnPop {
		border-radius: 100rpx;
		margin-top: 35rpx;
		background-color: #86cc14;
		position: fixed;
		width: 95%;
		bottom: 30rpx;
	}

	.desc {
		padding: 20rpx;
	}

	.topPop {
		height: 180rpx;
	}

	.topPop image {
		position: absolute;
		width: 150rpx;
		height: 150rpx;
		border: 2rpx solid #a0e223;
		border-radius: 20rpx;
	}

	.topPop .right {
		margin-left: 180rpx;
		color: #a0e223;
		font-weight: bold;
		font-size: 40rpx;
		padding-top: 20rpx;
	}

	.topPop .right text {
		font-size: 30rpx;
	}

	.selectCont {
		margin-bottom: 20rpx;
	}

	/deep/.checklist-box {
		height: 25rpx;
		border: none !important;
	}

	.contenerBox {
		width: 100%;
		height: calc(100vh - 10rpx);

	}

	.swiper {
		width: 750rpx;
		margin-bottom: 10rpx;
		height: 37%;
	}

	.swiperimg {
		width: 750rpx;
		height: 100%;
	}

	.biaotiBox {
		text-align: left;
		background-color: #fff;
		font-weight: bold;
		padding: 20rpx;
	}

	.informationBox2 {
		height: 100%;
		border-radius: 15rpx;
		width: 700rpx;
		background-color: #fff;
		margin-bottom: 150rpx;
	}


	.pricetiBox {
		margin: 15rpx 0;
		padding: 20rpx 0;
		width: 750rpx;
		background-color: #fff;
	}

	.biaotiTitle {
		background-color: #4CD964;
		color: #fff;
		border-radius: 10rpx;
		padding: 0 10rpx;
		margin-right: 10rpx;
	}

	.food-price {
		color: #f01414;
		font-size: 16px;
	}

	.evaluationBox {
		padding: 15rpx 0;
		width: 750rpx;
		background-color: #fff;
	}

	.icon_next {
		margin-top: 7rpx;
		height: 30rpx;
		width: 30rpx;
	}

	.avatarUrl {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #c4c4c4;
	}

	.name {
		margin-left: 15rpx;
	}

	.moreBox {
		height: 60rpx;
		line-height: 60rpx;
	}

	.evaluationImg {
		margin-top: 15rpx;
		height: 150rpx;
		width: 150rpx;
		border-radius: 15rpx;
	}

	.shopDetails {
		padding-top: 15rpx;
		margin-top: 15rpx;
		width: 750rpx;
		height: 100%;
		background-color: #fff;
	}

	.shopDetailsimg {
		width: 750rpx;
		height: 100%;
	}

	.shopBottomBox {
		height: 100rpx;
		width: 750rpx;
		background-color: #fff;
		align-items: center;
		display: flex;
		border: #CCCCCC 0.5rpx solid;
	}

	.shopBottomText {
		font-size: 22rpx;
	}

	.sharebox {
		width: 150rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		background-color: #00A0DC;
		text-align: center;
		color: #fff;
	}

	.zhaibox {
		width: 180rpx;
		height: 60rpx;
		line-height: 60rpx;
		margin-right: 20rpx;
		border-radius: 30rpx;
		text-align: center;
		color: #fff;
		background-color: #F0AD4E;
	}

	.collectionimg {
		width: 40rpx;
		height: 40rpx;
	}

	.editorBox {
		padding: 10px;
	}

	#editor {
		width: 100%;
		height: 300px;
		background-color: #CCCCCC;
	}

	.shopBottomBox {
		position: fixed;
		bottom: 0;
		height: 100rpx;
		line-height: 100rpx;
		width: 750rpx;
		background-color: #fff;
		display: flex;
		justify-content: flex-end;
	}
</style>
